<script setup lang="ts">
import { ref, defineProps, defineEmits, PropType, onUnmounted, computed } from 'vue'
// import { doPutOrderReceiver } from '@/apis/order'
// import type { ApiOrder, OrderInfo } from '@/basePackage/pages/order/types'

const $props = defineProps({
    info: {
        type: Object as PropType<any>,
        required: true,
    },
    showBtn: {
        type: Boolean,
        default: false,
    },
})
const $emit = defineEmits(['updateAddress'])
const address = computed(() => {
    if ($props.info.shopOrders[0].orderReceiver) {
        return $props.info.shopOrders[0].orderReceiver
    }
    if ($props.info.orderReceiver) {
        return $props.info.orderReceiver
    }
    return {
        address: '',
        id: '',
        mobile: '',
        name: '',
        areaCode: [],
    }
})

onUnmounted(() => {
    uni.$off('chooseAddress', updataOrderReceiver)
})

/**
 * 导航修改地址
 */
const handelAddress = () => {
    uni.navigateTo({ url: `/basePackage/pages/addressManage/AddressManage` })
}
uni.$on('chooseAddress', updataOrderReceiver)
/**
 * 修改收货地地址
 */
async function updataOrderReceiver(res: { shopOrderNo: string; name: string; areaCode: string[]; address: string; mobile: string }) {
    const { name, areaCode, address, mobile } = res
    const params = { shopOrderNo: $props.info.shopOrders[0].no, name, areaCode, address, mobile }
    // const { code, msg, data } = await doPutOrderReceiver($props.info.no, params)
    // if (code !== 200) return uni.showToast({ icon: 'none', title: `${msg ? msg : '修改地址失败'}` })
    $emit('updateAddress')
}
</script>

<template>
    <view class="address">
        <view class="address__left">
            <q-icon name="icon-dizhi2" size="20px" />
            <view>
                <view class="address__left--title">收货人:{{ address.name }} </view>
                <view class="address__left--content">
                    <text>取货地址:</text>
                    <area-show :areacode="address.areaCode" />
                    <text>{{ address.address }}</text>
                </view>
            </view>
        </view>
        <view class="address__right">
            <text class="address__right--mobile">{{ address.mobile }}</text>
        </view>
    </view>
</template>
<style lang="scss" scoped>
@include b(address) {
    box-sizing: border-box;
    padding: 20rpx 20rpx;
    @include flex(space-between);
    font-size: 30rpx;
    @include e(left) {
        @include flex(flex-start, flex-start);
        @include m(title) {
        }
        @include m(content) {
            width: 360rpx;
            color: #ccc;
            font-size: 26rpx;
            margin-top: 6rpx;
        }
    }
    @include e(right) {
        height: 115rpx;
        @include m(mobile) {
            color: #ccc;
        }
    }
}
</style>
